import React, { Component } from 'react';
import { Input, Button, Checkbox, Grid, Field, Form, Dialog } from '@icedesign/base';
import { createFormalistItem } from 'components/Formalist';
import logo from 'images/logo2.png';
import backgroundStars from 'images/stars-background.png';
import './Login.scss';
const { Row, Col } = Grid;

export default class Login extends Component {
    field = new Field(this, { autoUnmount: true })

    Item = createFormalistItem({ field: this.field, formItemLayout })

    state = {
        step: 1,
        captcha: {}
    }

    handleSubmit = (e) => {
        e.preventDefault()
        Dialog.alert({
            title: '标题',
            content: '内容内容内容内容内容'
        })
    }

    render() {
        const { captcha, step } = this.state;
        const { init } = this.field
        return (
            <div className="signup-form">

                <div className="svg-container">
                    <svg viewBox="0 0 800 400" className="svg">
                        <path fill="#f3f7fa" d="M 800 350 Q 400 300 0 350 L 0 0 L 800 0 L 800 350 Z"></path>
                    </svg>
                    <div className="footer tac bottom0 pa fw mb4 fc6">© 2019 账立得</div>
                </div>

                <div className="full pa top0 left0" style={styles.container}>
                    <div className="signup-container">
                        <div style={styles.formTitle}>
                            <img style={{ width: '100px', height: 'auto' }} src={logo} />
                            <div className="pl2 mt2" style={{ color: '#95A2B2' }}>云财税平台</div>
                        </div>
                        <Form onSubmit={this.handleSubmit} field={this.field} >
                            <div style={styles.formItems}>
                                <Row style={styles.formItem}>
                                    <Col>
                                        <this.Item
                                            label="用户名"
                                            // label={<IceIcon type="person" size="small" style={styles.inputIcon}/>}
                                            name="name" required item={Input} maxLength={20} placeholder="手机号/用户名" />
                                    </Col>
                                </Row>
                                <Row style={styles.formItem}>
                                    <Col>
                                        <this.Item
                                            label="密码"
                                            // label={<IceIcon type="lock" size="small" style={styles.inputIcon} />}
                                            name="password" required item={Input} htmlType="password"
                                            placeholder="密码" />
                                    </Col>
                                </Row>
                                {captcha.image && <Row style={styles.formItem}>
                                    <Col>
                                        <Form.Item label="验证码: " labelCol={{ span: 8 }} required>
                                            <Row>
                                                <Form.Item>
                                                    <Input maxLength={4} {...init('captcha_code', {
                                                        rules: {
                                                            required: true,
                                                            message: '请输入验证码'
                                                        }
                                                    })} placeholder="验证码" />
                                                </Form.Item>
                                                {/* <Form.Item>
                                                        <img src={captcha.image} alt="验证码" onClick={this.fetchCaptcha}/>
                                                    </Form.Item> */}
                                            </Row>
                                        </Form.Item>
                                    </Col>
                                </Row>}
                                <Row style={styles.formItem} className="ml4 mr4">
                                    <Button size="large" type="primary" htmlType="submit" className="fs16"
                                        style={styles.submitBtn}>
                                        登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录
                                        </Button>
                                </Row>
                                <Grid.Row justify="end" className="tips">
                                    <Button shape="text">忘记密码</Button>
                                </Grid.Row>
                            </div>
                        </Form>
                    </div>
                </div>
            </div>
        )
    }
}

export const formItemLayout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 }
};


const styles = {
    container: {
        backgroundImage: `url(${backgroundStars})`,
        backgroundSize: '100%',
        backgroundRepeat: 'no-repeat'
    },
    formItem: {
        position: 'relative',
        marginBottom: '15px',
        flexDirection: 'column',
    },
    formTitle: {
        margin: '-60px 0 20px',
        textAlign: 'center',
        // color: '#3080fe',
        letterSpacing: '12px',
    },
    inputIcon: {
        // position: 'absolute',
        // left: '0px',
        // top: '5px',
        color: '#999',
    },
    submitBtn: {
        boxShadow: "0 5px 20px rgba(32, 165, 152, .4)"
    },
    link: {
        color: '#999',
        textDecoration: 'none',
        fontSize: '13px',
    },
    line: {
        color: '#dcd6d6',
        margin: '0 8px',
    },
};
